<template>
  <div class="func" >
    <p class="attr">
      购买按钮
    </p>
    <div class="adjust-item">
      <span>按钮显示</span>
      <el-radio-group v-model="pageConfigModel.purchaseBtnShow">
        <el-radio :label="true">
          显示
        </el-radio>
        <el-radio :label="false">
          隐藏
        </el-radio>
      </el-radio-group>
    </div>

    <template v-if="pageConfigModel.purchaseBtnShow">
      <div class="adjust-item">
        <span style="flex-shrink: 0">按钮样式</span>
        <el-radio-group v-model="pageConfigModel.purchaseBtnStyle">
          <el-radio label="plus">
            <div class="icon-wrapper">
              <span class="iconfont icon-plus" />
            </div>
          </el-radio>
          <el-radio label="cart">
            <div class="icon-wrapper">
              <span class="iconfont icon-shop-car" />
            </div>
          </el-radio>
          <el-radio label="solidBtn">
            <div class="purchase-button__solid">
              购买
            </div>
          </el-radio>
          <el-radio label="emptyBtn">
            <div class="purchase-button__empty">
              购买
            </div>
          </el-radio>
          <el-radio label="custom">
            自定义图片
          </el-radio>
        </el-radio-group>
      </div>

      <div class="sub-options">
        <div
          v-if="pageConfigModel.purchaseBtnStyle === 'plus' ||
            pageConfigModel.purchaseBtnStyle === 'cart' ||
            pageConfigModel.purchaseBtnStyle === 'solidBtn' ||
            pageConfigModel.purchaseBtnStyle === 'emptyBtn'"
          class="sub-option"
        >
          <p class="label label__64">
            主题色
          </p>
          <span class="control-component">
            <el-color-picker v-model="pageConfigModel.purchaseBtnMainColor" />
          </span>
          <span class="value">{{ pageConfigModel.purchaseBtnMainColor }}</span>
        </div>

        <div
          v-if="pageConfigModel.purchaseBtnStyle === 'solidBtn' ||
            pageConfigModel.purchaseBtnStyle === 'emptyBtn'"
          class="sub-option"
        >
          <span class="label label__64">文字</span>
          <span class="control-component">
            <el-input
              v-model="pageConfigModel.purchaseBtnText"
              size="small"
              maxlength="8"
              :show-word-limit="true"
            />
          </span>
        </div>

        <div
          v-if="pageConfigModel.purchaseBtnStyle === 'solidBtn' ||
            pageConfigModel.purchaseBtnStyle === 'emptyBtn'"
          class="sub-option"
        >
          <span class="label label__64">圆角</span>
          <span class="control-component">
            <el-slider
              v-model="pageConfigModel.purchaseBtnRadius"
              size="small"
              :min="0"
              :max="20"
              show-input
            />
          </span>
          <span class="value">px</span>
        </div>

        <div
          v-if="pageConfigModel.purchaseBtnStyle === 'custom'"
          class="sub-option"
        >
          <span class="label label__64">
            上传图片
          </span>
          <span class="control-component">
            <Upload
              v-model="pageConfigModel.carUrl"
              file-path="actapp/"
              list-type="picture-card"
            >
              <el-icon>
                <Plus />
              </el-icon>
            </Upload>
          </span>
          <span class="value">(建议图片高度40px)</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {
  IPurchaseButtonPageConfig,
  purchaseButtonPageConfig
} from "@/views/activity/actApp/components/default/operationComponents/purchaseButtonSetting/index";
import {WritableComputedRef} from "vue";

const props = withDefaults(defineProps<{
  pageConfig: IPurchaseButtonPageConfig
}>(), {
  pageConfig: () => purchaseButtonPageConfig
})

const emits = defineEmits<{
  (e:"update:pageConfig", value: IPurchaseButtonPageConfig):void
}>()

const pageConfigModel:WritableComputedRef<IPurchaseButtonPageConfig> = computed({
  get() {
    return props.pageConfig
  },
  set(newValue) {
    emits("update:pageConfig", newValue)
  }
})


</script>

<style scoped lang="scss">
@use "../../styles/operation";

</style>
